import { useSelector, useDispatch } from "react-redux";
import { useEffect, useRef } from "react";
import * as echarts from "echarts";
import "./index.css";

export default function SpeedDashBoard({
  isRotateBoard,
  speedData,
  className,
}) {
  const speedRef = useRef(null);
  const speedChart = useRef(null);
  useEffect(() => {
    speedChart.current = echarts.init(speedRef.current);
    speedChart.current.setOption(speedData);
    return () => {
      speedChart.current.dispose();
    };
  }, []);
  window.addEventListener("resize", function () {
    speedChart.current.resize();
  });
  return (
    <>
      <div className="dashboard">
        <div ref={speedRef} className={className}></div>
        {isRotateBoard ? (
          <div className="rotateSpeedValue"></div>
        ) : (
          <div className="speedValue"></div>
        )}
      </div>
    </>
  );
}
